<template>
  <div class="app-container">
		<el-card v-loading="isLoading">
			<div class="export-btns">
				<el-button type="primary" @click="exportExcel('total')">Excel匯出</el-button>
				<el-button type="primary" @click="exportWord('total')">Word匯出</el-button>
			</div>
			<BarChart :chart-data="tsData"></BarChart>
		</el-card>
		<el-card class="mtb30" v-loading="isLoading">
			<div class="export-btns">
				<el-button type="primary" @click="exportExcel('money')">Excel匯出</el-button>
				<el-button type="primary" @click="exportWord('money')">Word匯出</el-button>
			</div>
			<StackBarChart :chart-data="mData"></StackBarChart>
		</el-card>
		<el-card v-loading="isLoading">
			<div class="export-btns">
				<el-button type="primary" @click="exportExcel('number')">Excel匯出</el-button>
				<el-button type="primary" @click="exportWord('number')">Word匯出</el-button>
			</div>
			<StackBarChart :chart-data="nData"></StackBarChart>
		</el-card>
	</div>
</template>

<script>
import {mapGetters} from 'vuex'
import { getSD } from '@/api'
import { export_json_to_excel } from '@/utils/Export2Excel'
import { export_json_to_word } from '@/utils/Export2Word'
import BarChart from './components/BarChart.vue'
import StackBarChart from './components/StackBarChart.vue'
export default {
  name: 'SalesDirection',
	components: {BarChart, StackBarChart},
	data() {
		return {
			isLoading: false,
			tsData: {},
			mData: {},
			nData: {}
		}
	},
	created() {
		this.getSaleDire()
	},
  computed: {
    ...mapGetters(['language'])
  },
	methods: {
		// 獲取銷售方向數據
		async getSaleDire() {
			try {
				this.isLoading = true
				const {results: {totalSales, saleData}} = await getSD()
				this.tsData = {
					data: totalSales.map(item => item.sort_number),
					xData: totalSales.map(item => item.product_sort_name)
				}

				const dates = [...new Set(saleData.map(item => item.payment_date))]

				const pds = [...new Set(saleData.map(item => item.product_name))]

				this.mData = {
					title: this.$t('analysis.sdT2'),
					xData: dates,
					sData: pds.map(name => (
						{
							name,
							type: 'bar',
							stack: 'Ad',
							emphasis: {focus: 'series'},
							data: dates.map(date => saleData.find(({payment_date, product_name}) => payment_date===date && product_name===name)?.money || 0)
						}
					))
				}

				this.nData = {
					title: this.$t('analysis.sdT3'),
					xData: dates,
					sData: pds.map(name => (
						{
							name,
							type: 'bar',
							stack: 'Ad',
							emphasis: {focus: 'series'},
							data: dates.map(date => saleData.find(({payment_date, product_name}) => payment_date===date && product_name===name)?.product_number || 0)
						}
					))
				}

			} catch (error) {
				
			} finally {
				this.isLoading = false
			}
		},
		exportExcel(type) {
			let header, data, filename
			
			switch(type) {
				case 'total':
					header = this.language==='zh' ? ['產品類別', '銷售數量'] : ['Product Category', 'Sales volumes']
					data = this.tsData.xData.map((name, index) => [
						name,
						this.tsData.data[index]
					])
					filename = this.language==='zh' ? '總銷售分析' : 'Total sales analysis'
					break
				case 'money':
					header = [this.language==='zh' ? '日期' : 'Date', ...this.mData.sData.map(item => item.name)]
					data = this.mData.xData.map((date, index) => [
						date,
						...this.mData.sData.map(item => item.data[index])
					])
					filename = this.language==='zh' ? '銷售金額分析' : 'Sales amount analysis'
					break
				case 'number':
					header = [this.language==='zh' ? '日期' : 'Date', ...this.nData.sData.map(item => item.name)]
					data = this.nData.xData.map((date, index) => [
						date,
						...this.nData.sData.map(item => item.data[index])
					])
					filename = this.language==='zh' ? '銷售數量分析' : 'Sales quantity analysis'
					break
			}
			
			export_json_to_excel({
				header,
				data,
				filename
			})
		},
		exportWord(type) {
			let header, data, filename, title
			
			switch(type) {
				case 'total':
					header = this.language==='zh' ? ['產品類別', '銷售數量'] : ['Product Category', 'Sales volumes']
					data = this.tsData.xData.map((name, index) => [
						name,
						this.tsData.data[index]
					])
					filename = this.language==='zh' ? '總銷售分析' : 'Total sales analysis'
					title = this.language==='zh' ? '總銷售分析報告' : 'Total Sales Analysis Report'
					break
				case 'money':
					header = [this.language==='zh' ? '日期' : 'Date', ...this.mData.sData.map(item => item.name)]
					data = this.mData.xData.map((date, index) => [
						date,
						...this.mData.sData.map(item => item.data[index])
					])
					filename = this.language==='zh' ? '銷售金額分析' : 'Sales amount analysis'
					title = '銷售金額分析報告'
					break
				case 'number':
					header = [this.language==='zh' ? '日期' : 'Date', ...this.nData.sData.map(item => item.name)]
					data = this.nData.xData.map((date, index) => [
						date,
						...this.nData.sData.map(item => item.data[index])
					])
					filename = this.language==='zh' ? '銷售數量分析' : 'Sales quantity analysis'
					title = this.language==='zh' ? '銷售數量分析報告' : 'Sales Quantity Analysis Report'
					break
			}
			
			export_json_to_word({
				header,
				data,
				filename,
				title
			})
		}
	}
}
</script>

<style scoped>
.export-btns {
	margin-bottom: 20px;
}
</style>